@import "base/base";

//Carousel
//$carouselHeight : 450px;
//$carouselXSHeight : 255px;
$carouselControlHeight : 60px;
$carouselControlXSHeight : 40px;
$carouselPauseBtHeight : 100px;
$carouselPauseBtXSHeight : 60px;
div#carouselHome{
    div.item{
        img{
            margin: 0 auto;
            width: auto;
        }
        div.carousel-caption{
            height: 100%;
            bottom: 0;
            //滑动1
            .carouselPauseBt{
                position:absolute;
                margin: auto;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                width: $carouselPauseBtHeight;
                height: $carouselPauseBtHeight;
                @media screen and (max-width: $screen-sm){
                    width: $carouselPauseBtXSHeight;
                    height: $carouselPauseBtXSHeight;
                }
            }
            
            .btn-mybtn2{
                position:absolute;
                top: 50%;
                left: 30px;
                margin-top: 20px;
                font-size: 20px;
                width: 180px;
                border-radius: 20px;
                color: #fff;
                background-color: #ffa017;
                border-color: #ffa017;
                
                @media screen and (max-width: $screen-sm){
                    left: 16px;
                    font-size: 12px;
                    width: 130px;
                }
                @media screen and (max-width: 450px){
                    position : relative;
                    left: 0;
                    margin-top: 5px;
                }
            }
        }
    }
    
    .carousel-indicators{
        padding-left: 10px;
        text-align: left;
        @media screen and (max-width: $screen-sm){
            padding-left: 6px;
            bottom: 0;
        }
        @media screen and (max-width: 730px){
            display: none;
        }
    }

    .myCarouselControl{
        position: absolute;
        top: 50%;
        margin-top: -$carouselControlHeight/2;
        img{
            width: $carouselControlHeight;
            height: $carouselControlHeight;
        }
        @media screen and (max-width: $screen-sm){
            margin-top: -$carouselControlXSHeight/2;
            img{
                width: $carouselControlXSHeight;
                height: $carouselControlXSHeight;
            }
        }
    }
    .left{
        left: 0;
    }
    .right{
        right: 0;
    }

}

$featureBlockMargin : 35px;
$featureBlockXSMargin : 10px;
$featureBlockHegiht : 250px;
$featureBlockXSHegiht : 180px;

//Features Block area
div.featuresBlockArea{
    position: relative;
    >div.container{
        >div.row{
            margin: $featureBlockMargin 0 0 0 ;
            @media screen and (max-width: $screen-md){
                margin-top: $featureBlockXSMargin;
            }
        }
        
        div.thumbnail{
            background-color: $bodyBackgroundColor;
            border: none;
            height: $featureBlockHegiht;
            div.caption{
                text-align: center;
                img{
                    min-height: 140px;
                }
                h3{
                    font-size: 1.2em;
                }
                p{
                    font-size: 16px;
                }
            }
            @media screen and (max-width: $screen-md){
                height: $featureBlockXSHegiht;
                margin-bottom: 10px;
            }
        }
    }
}

//Promot Area
div.homePromotArea{
    position: absolute;
    display: none;
    top: -20px;
    background-color: #FF9412;
    width: 100%;
    height: $featureBlockHegiht + $featureBlockMargin*2;
    padding: $featureBlockMargin 0;
    
    @media screen and (max-width: $screen-md) and (min-width : $screen-sm){
        top: -12px;
        height: $featureBlockXSHegiht + $featureBlockXSMargin*2;
        padding: $featureBlockXSMargin 0;
    }
    #closeFeatureCarousel{
        position: absolute;
        display: block;
        color: white;
        right: 30%;
        font-size: 1.3em;
        z-index: 999;
    }
    .carousel-indicators{
        bottom: -25px;
    }
    #carouselHomePromot{
        height: 100%;
        .carousel-inner{
            height: 100%;
        }
    }
        div.item{
            height: $featureBlockHegiht;
            img{
                margin: 0 auto;
                height: 100% ;
                @media (min-width: $screen-sm){
                    width: 700px;
                }
                @media (min-width: $screen-md){
                    width: 880px;
                }
                @media (min-width: $screen-lg){
                    width: 1050px;
                }
            }
            .carousel-caption{
                height: 100%;
                margin: auto;  
                position: absolute; 
                left: 0; bottom: 0; right: 0;top : 7px;
                @media (min-width: $screen-sm){
                    width: 700px;
                }
                @media (min-width: $screen-md){
                    width: 880px;
                }
                @media (min-width: $screen-lg){
                    width: 1050px;
                }
                .cardCloseBt{
                    position: absolute;
                    right: 0;
                    width: 50px;
                    height: 50px;
                }
                div.infoArea{
                    text-align: left;
                    color: black;
                    margin-left:32% ;
                    width:60%;
                    h2{
                        font-size: 2em;
                    }
                    p{
                        text-shadow: none;
                        padding-top: 20px;
                        text-indent: 2em;
                        @media screen and (max-width: $screen-md) and (min-width : $screen-sm){
                            padding-top: 0px;
                            font-size: 0.9em;
                        }
                    }
                }
            }
            
        }
        
    .myCarouselControl{
        position: absolute;
        top: 20px + $featureBlockMargin;
        margin-top: -$carouselControlHeight/2;
        span{
            color: #122546;
            font-size: 2.5em;
            line-height: $featureBlockHegiht;
        }
        @media screen and (max-width: $screen-md) and (min-width : $screen-sm){
            top:12px + $featureBlockXSMargin;
            span{
                line-height: $featureBlockXSHegiht;
            }
        }
    }
    .left{
        left: 30px;
        @media screen and (min-width: $screen-sm) and (max-width: $screen-md){
            left: 0;
        }
        @media (max-width: $screen-sm){
            left: 0;
        }
    }
    .right{
        right:30px;
        @media screen and (min-width: $screen-sm) and (max-width: $screen-md){
            right: 0;
        }
        @media (max-width: $screen-sm){
            right: 0;
        }
    }
}

//Features Detail Area
//$featuresHeight : 
.backgroundWhite{
    background-color: white;
}
div.featuresDetailArea div.row{
        padding: 50px 0;
        @media screen and (max-width: $screen-sm){
            padding: 30px 0;
        }
        div.featuresDetailItemPic{
            padding-left: 60px;
            img{
                height: 250px;
                width: auto;
            }
            
            @media screen and (min-width : $screen-sm) and (max-width: $screen-md){
                padding-left: 15px;
            }
            
            @media screen and (max-width: $screen-sm){
                padding-left: 15px;
                img{
                    margin-left: 5%;
                    width: 90%;
                    height: auto;
                }
            }
        }
        
        div.featuresDetailItemText{
            text-align: left;
            h3{
                font-size: 30px;
                font-weight: bold;
                color: #2d2828;
            }
            p{
                text-indent:2em;
                margin-top: 16px;
                font-size: 1.2em;
                color: #696969;
            }
            
            @media screen and (min-width : $screen-sm) and (max-width: $screen-md){
                padding-left: 40px;
                h3{
                    margin-top: 0;
                }
            }
            
            @media screen and (max-width: $screen-sm){
                text-align: center;
                h3{
                    margin-top: 10px;
                    font-size: 1.2em;
                }
                p{
                    text-indent:0em;
                    margin-top: 10px;
                    font-size: 1em;
                }
            }
            
            .btn-mybtn{
                margin-top: 20px;
                font-size: 20px;
                width: 180px;
                border-radius: 20px;
                color: #fff;
                background-color: #ffa017;
                border-color: #ffa017;
            
                @media screen and (max-width: $screen-md){
                    margin-top: 5px;
                }
            }
        }
        
        div.secondTextArea{
            padding-left: 60px;
            @media screen and (max-width: $screen-sm){
                padding-left: 15px;
                margin-bottom: 10px;
            }
        }
}

//news
$newBackgroundColor : #2a2d34;
div.newsArea{
    background-color: $newBackgroundColor;
    >div.container{
        padding-top: 30px;
        margin-bottom: 100px;
        @media screen and (max-width: $screen-sm){
            padding-top: 15px;
            margin-bottom: 15px;
        }
        >h1{
            color: #FFA017;
            font-size: 30px;
            @media screen and (max-width: $screen-sm){
                font-size: 1em;
            }
        }
        >p{
            color: #777;
        }
        >div.row{
            margin-top: 70px;
            >div{
                margin-bottom: 40px;
                @media screen and (max-width: $screen-sm){
                    margin-bottom: 0px;
                }
            }
        }
        div.thumbnail{
            background-color: $newBackgroundColor;
            border: none;
            height: 200px;
            img{
                width: 90%;
                height: auto;
            }
            .mask{
                background-color: black;
                opacity: 0.5;
                top: 0;
                position: absolute;
                display: none;
                margin: 0 auto;
                top: 4px; left: 0; bottom: 0; right: 0; 
            }
            .maskText{
                background-color: black;
                opacity: 0.9;
                top: 0;
                position: absolute;
                display: none;
                margin: 0 auto;
                top: 0; left: 0; bottom: 0; right: 0;
                padding: 10px;
                color: white;
            }
            
            
            @media screen and (max-width: $screen-sm){
                height: auto;
                img{
                    width: 100%;
                    height: auto;
                }
            }
        }
    }
}
